<template>
  <div>
    <h3>差异报告详情</h3>
    <el-card>
      <div>
        <div class="border-bottom mar-top-12">
          <div class="title border-line f-size-16">报告办理信息</div>
          <div class="content">
            <div class="item">
              <p class="title">办理机构名称</p>
              <span>中国人民银行</span>
            </div>
            <div class="item">
              <p class="title">办理状态</p>
              <span>已办结</span>
            </div>
            <div class="item">
              <p class="title">办理时间</p>
              <span>2025-08-08 13:09:09</span>
            </div>
            <div class="item">
              <p class="title">办理意见</p>
              <span>-</span>
            </div>
          </div>
        </div>
        <div class="border-bottom mar-top-12">
          <div class="title border-line">报告基本信息</div>
          <div class="content">
            <div class="item">
              <p class="title">报告机构名称</p>
              <span>报告机构名称</span>
            </div>
            <div class="item">
              <p class="title">报告机构编码</p>
              <span>123456</span>
            </div>
            <div class="item">
              <p class="title">报告编码</p>
              <span>123456</span>
            </div>
            <div class="item">
              <p class="title">报告时间</p>
              <span>2025-09-09 12:12:12</span>
            </div>
            <div class="item">
              <p class="title">关联核验记录流水号</p>
              <span>1234554321</span>
            </div>
            <div class="item">
              <p class="title">关联查询流水号</p>
              <span>1234554321</span>
            </div>
            <div class="item">
              <p class="title">机构联系电话</p>
              <span>-</span>
            </div>
            <div class="item">
              <p class="title">报告简述</p>
              <span>-</span>
            </div>
          </div>
        </div>
        <div class="border-bottom mar-top-12">
          <div class="title border-line">备案主体基本信息</div>
          <div class="content">
            <div class="item">
              <p class="title">统一社会信用代码</p>
              <span>1234567890</span>
            </div>
            <div class="item">
              <p class="title">备案主体名称</p>
              <span>备案主体名称有限公司</span>
            </div>
            <div class="item">
              <p class="title">备案主题类型</p>
              <span>-</span>
            </div>
          </div>
        </div>
        <div class="mar-top-12">
          <div class="title border-line">受益所有人及所有权信息</div>
          <el-row :gutter="10" class="mar-top-12 row border-bottom">
            <el-col :span="8">姓名</el-col>
            <el-col :span="12">
              <el-input size="small" v-model="baseInfo.name" placeholder=""></el-input>
            </el-col>
            <el-col :span="4">
              <el-radio-group v-model="radio">
                <el-radio :label="1">通过</el-radio>
                <el-radio :label="0">不通过</el-radio>
              </el-radio-group>
            </el-col>
          </el-row>
          <el-row :gutter="10" class="row border-bottom">
            <el-col :span="8">性别</el-col>
            <el-col :span="12">
              <el-input size="small" v-model="baseInfo.sex" placeholder=""></el-input>
            </el-col>
            <el-col :span="4">
              <el-radio-group v-model="radio">
                <el-radio :label="1">通过</el-radio>
                <el-radio :label="0">不通过</el-radio>
              </el-radio-group>
            </el-col>
          </el-row>
          <el-row :gutter="10" class="row border-bottom">
            <el-col :span="8">国籍</el-col>
            <el-col :span="12">
              <el-input size="small" v-model="baseInfo.nationality" placeholder=""></el-input>
            </el-col>
            <el-col :span="4">
              <el-radio-group v-model="radio">
                <el-radio :label="1">通过</el-radio>
                <el-radio :label="0">不通过</el-radio>
              </el-radio-group>
            </el-col>
          </el-row>
        </div>
        <div class="mar-top-12">
          <div class="title border-line f-size-16">上传证明材料</div>
          <div class="mar-top-12">
            <el-upload class="upload-demo" drag action="#" multiple>
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <div class="el-upload__tip" slot="tip">仅支持PDF,PNG,JPG,OFD格式，文件个数限制：1个，单个文件不超过1M</div>
            </el-upload>
          </div>
        </div>
        <div class="mar-top-12">
          <div class="title border-line f-size-16">分析报告</div>
          <div class="mar-top-12">
            <el-upload class="upload-demo" drag action="#" multiple>
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <div class="el-upload__tip" slot="tip">仅支持PDF,PNG,JPG,OFD格式，文件个数限制：1个，单个文件不超过1M</div>
            </el-upload>
          </div>
        </div>
        <div class="mar-top-12">
          <div class="title border-line f-size-16">上传案例分析报告</div>
          <div class="mar-top-12">
            <el-upload class="upload-demo" drag action="#" multiple>
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <div class="el-upload__tip" slot="tip">仅支持PDF,PNG,JPG,OFD格式，文件个数限制：1个，单个文件不超过1M</div>
            </el-upload>
          </div>
        </div>
      </div>
    </el-card>
    <div class="text-right mar-top-12">
      <el-button size="small" type="primary" @click="exportInfo">提 交</el-button>
      <el-button size="small" @click="goBack">返 回</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CaseApply',

  data() {
    return {
      baseInfo: {
        name: 'qqweas',
        sex: '女',
        nationality: '中国香港',
      },
    }
  },

  mounted() {},

  methods: {
    exportInfo() {},
    goBack() {
      this.$router.go(-1)
    },
  },
}
</script>
<style lang="scss" scoped>
.content {
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  color: #666;
  padding-bottom: 12px;
  .item {
    width: 33%;
    p {
      margin-bottom: 6px;
    }
  }
}

.row {
  background: #fff;
  display: flex;
  align-items: center;
}
::v-deep .el-input--small .el-input__inner {
  border: none;
  background: #eee;
}
</style>